<template>
	<div class="order">
		<div class="order-top">
			<i class="iconfont icon-zuojiantou"></i>
			<p>全部订单<i class="iconfont icon-xiajiantou"></i></p>
		</div>
		<ul>
			<li v-for="(item,index) in list" :key="item.id" @click="but(index)">
				<div class="order-li-div">
					{{item.title}}
					<i :class="{'order-li-i':item.show}"></i>
				</div>
			</li>
		</ul>
		<div class="order-bottom">
			<div class="bottom-img">
				<div>
					<img src="../../assets/img/order-bg01.png" >
					<p>这里什么也没有</p>
					<p>继续去探索未知的新世界吧</p>
				</div>
			</div>
		</div>
		<!-- 底部 -->
		<BottomNav pages=2></BottomNav>
	</div>
</template>

<script>
	import Cookies from 'js-cookie';
	// 应用公共子组件——底部
	import BottomNav from '../default/BottomNav.vue'
	export default{
		name:'Order',
		components:{
			BottomNav
		},
		data(){
			return{
				list:[
					{id:1,title:'全部',show:true},
					{id:2,title:'待付款',show:false},
					{id:3,title:'已付款',show:false},
					{id:4,title:'待评价',show:false},
					{id:5,title:'退款/售后',show:false}
				]
			}
		},
		mounted() {
			if(!Cookies.get('phone')){
				this.$router.push({path:'/login',query:{url:'order'}})
			}else{
				this.$router.push({path:'/order'})
			}
		},
		methods:{
			but(i){
				for(let item of this.list){
					item.show=false
				}
				if(i+1==this.list[i].id){
					this.list[i].show=true
				}
			}
		}
	}
</script>

<style scoped>
	.order{
		margin: 0;
		width: 100%;
		height: auto;
	}
	.order /deep/ .nava{
		background-color: #fff;/* 父组件设置子组件的样式 */
	}
	.order-top p{
		display: inline-block;
		width: 100%;
		font-size: 0.45rem;
		font-weight: bold;
		text-align: center;
		position: fixed;
		height: 1.5rem;
		top: 0;
		right: 0;
		z-index: 100;
		line-height: 1.5rem;
		display: flex;
		justify-content: center;
		align-items: center;
	}
	.order-top{
		display: flex;
		align-items: center;
		width: 100%;
		height: 1.5rem;
		position: fixed;
	}
	.order-top .icon-zuojiantou{
		top: 0;
		line-height: 1.5rem;
		position: fixed;
		margin: 0 ;
		padding: 0;
		font-size: 0.4rem;
		width: 15%;
		text-align: center;
	}
	.order-top p i{
		color: #B3B3B3;
		font-size: 0.2rem;
	}
	.order ul{
		margin-top: 0.6rem;
		list-style: none;
		width: 100%;
		position: fixed;
	}
	.order ul li{
		text-align: center;
		width: 20%;
		height: 100%;
		float: left;
		font-size: 0.37rem;
	}
	.order ul li div{
		display: inline-block;
		position: relative;
		z-index: 11;
	}
	.order ul li .order-li-i{
		display: inline-block;
		width: 80%;
		height: 0.13rem;
		background: #fff100;
		border-radius: 0.2rem;
		position: absolute;
		left: 50%;
		bottom: -0.13rem;
		z-index: 10;
		transform: translateX(-50%);
	}
	.order-bottom{
		margin-top: 0.8rem;
		width: 100%;
		height: 10rem;
	}
	.order-bottom p{
		width: 100%;
		text-align: center;
	}
	.bottom-img{
		top: 20%;
		position: absolute;
		width: 100%;
		height: 60%;
		text-align: center;
		display: flex;
		justify-content: center;
		align-items: center;
		z-index: 1;
	}
	.bottom-img img{
		width: 3rem;
		height: 3rem;
	}
	.bottom-img p{
		font-size: 0.37rem;
		color: #AEAEAE;
	}
</style>
